<template>
	<view>
        <u-popup :show="show" mode="bottom"  @close="closeShow" :round="23">
			<div style="height:90vh;">
				<div class="popupTitle" style="text-align: left;padding-left:16px;">
					<img src="https://pic.moresu.com/FguOeBmmEYEAc-DG8aaPXd1MfjfR" style="width:15px;height:17px;display: inline-block;vertical-align: middle;"/>
					<span style="padding-left:20rpx;vertical-align: middle;">选择厂家牌号</span>
					<div style="color:#FF5E01;font-size:28rpx;float:right;margin-right:32rpx;font-weight: 400" v-if="type == 'more'" @click="save">确认</div>
					<div style="color:#FF5E01;font-size:28rpx;float:right;margin-right:32rpx;font-weight: 400" v-else @click="black">返回上一级</div>
				</div>
				<div class="popup-con" style="padding:0 24px 16px 24px">
					 <!-- <u-sticky bgColor="#fff" offset-top="1"> -->
						  <div style="padding:5px 0">
								 <u-search placeholder="输入牌号/厂家" @search="searchgetList" @change="searchgetList" v-model="keywords" shape="square" bgColor="#fff" :showAction="false" borderColor="#DEDEDE"></u-search>
						  </div>
					 <!-- </u-sticky> -->
			
					<div class="goodsSn-list" style="height:calc(90vh - 170px)" customNavHeight="30">
						<u-index-list :index-list="indexList" :height="height" :top="domTop" v-if="itemArr.length > 0">
							<template v-for="(item, index) in itemArr"> 
								<u-index-item>
									<!-- #ifndef APP-NVUE -->
									<u-index-anchor :text="indexList[index]" :size="0" height="-1px" bgColor="#fff"></u-index-anchor>
									<!-- #endif -->
									<view class="list-cell" v-for="(cell, ii) in item" :key="ii" @click="chooseItem(cell,index,ii)" :class="{'choose': type == 'more' && chooseIndexList.indexOf(index + '/'+ ii)!= -1  }">
										<div style="margin-left:40rpx;">{{cell.goodsSn}}</div>
										<div style="margin-right:40rpx;">{{cell.brandName}}</div>
									</view>
								</u-index-item>
							</template>
						</u-index-list>
						<u-empty mode="list" v-else-if="itemArr.length == 0 && !listLoading" icon="https://pic.moresu.com/Fs-rZPgApAIGT8szof2GUATIiF8N" text="暂无数据"></u-empty>
					</div>
					<div class="zdy-div" v-if="type != 'more'">
							  <div class="zdy-btn" v-if="!show2" @click="show2=true">自定义</div>
							  <div class="zdy-form" v-else>
								  <div style="padding-right:10rpx;flex:1">
									   <u--input placeholder="请输入自定义牌号"  border="surround"  v-model="value" size="small"></u--input>
								  </div>
								 
								  <div style="width:120rpx;">
									  <u-button text="确认" shape="circle" type="primary" size="small" @click="savezdy"></u-button>
								  </div>
								  <div style="width:10rpx"></div>
								  <div style="width:120rpx">
									  <u-button text="取消" shape="circle" type="primary" size="small" plain @click="show2=false;value=''"></u-button>
								  </div>
							  </div>
					</div>
				</div>
			</div>
        </u-popup>
	</view>
</template>
<script>

import{imgCheck} from '@/plugins/upload/upload.js'
import {getGoodsSnList} from '@/config/api.js'
import store from '@/store';
const log = require('@/plugins/log.js')

export default {
    name: 'goodsSn',
 
	mounted() {
	 
	},
	data() {
		return {
			height:'',
			domTop:'',
           show:false,
		   keywords:'',
		   indexList: [],
		   itemArr: [],
		   sys: uni.$u.sys(),
		   listLoading:false,
		   type:'',
		   chooseList:[],
		   iiArray:[],
		   indexArray:[],
		   show2:false,
		   value:'',
		   chooseIndexList:[],
		   brandId:''
		}
	},
    watch:{

    },
	
	created() {
	
	},
	methods: {
	
		init(categoryId,type,brandId){
			this.keywords = ''
			this.indexList= []
			this.itemArr =  []
			this.chooseIndexList = []
			this.show = true;
			this.type = type ? type : '';
			this.brandId = brandId ? brandId : '';
			this.chooseList = [];
			this.iiArray = [];
			this.indexArray = [];
			this.categoryId = categoryId;
			this.value = ''
			this.getList()	
			setTimeout(()=>{
				const query = uni.createSelectorQuery().in(this);
				let self = this
				 query.select('.goodsSn-list').boundingClientRect()
			     query.selectViewport().scrollOffset()
				 query.exec(function(res){
					  console.log(res)
					  self.height = res[0].height
					  self.domTop = self.sys.windowHeight * 0.1 + 120
					  console.log("self.height",self.height)
					  console.log("self.domTop",self.domTop)
				 })
			},500)
			
		},
		searchgetList(){
			log.info('精准询价&厂家牌号弹窗搜索框&'+this.keywords)
			this.getList()
		},
		
		getList(){
			if(this.categoryId){
				this.listLoading = true;
				let data = {classId:this.categoryId,keywords:this.keywords}
				if(this.type == 'addGoodss'){
					data.isSelfSale = 1
				}
				if(this.type == 'brandId'){
					data.brandId = this.brandId
				}
				getGoodsSnList(data).then((res)=>{
					this.indexList = res.indexList;
					this.itemArr = res.itemArr;
					this.listLoading = false
				}).catch(()=>{
					this.listLoading = false
				})
			}
			
		},
		
		
       chooseItem(e,index,ii){
		   if(this.type == 'more'){
			   console.log(this.chooseList)
			   let i = this.chooseList.findIndex((el) => {
			     return el.brandId == e.brandId && el.goodsSn == e.goodsSn
			   })
			   if (i != -1) {
			     console.log(i)
			     this.chooseList.splice(i, 1);
				 this.indexArray.splice(i, 1);
				 this.iiArray.splice(i, 1);
				 this.chooseIndexList.splice(i, 1);
				 
			   } else {
			     this.chooseList.push(e);
				 this.indexArray.push(index)
				 this.iiArray.push(ii)
				 this.chooseIndexList.push(index+'/'+ii)
			   }
		   }else{
			  log.info('精准询价&厂家牌号弹窗厂家牌号&'+e.brandName+e.goodsSn)
			  this.$emit('chooseItem',e)
			  this.show = false 
		   }  
		   // console.log("indexArray",this.indexArray)
		   // console.log("iiArray",this.iiArray)
	   },
	   
	   save(){
		     if(this.chooseList.length > 0){
				this.$emit('chooseItem', this.chooseList)
				this.show = false 
			 }else{
				 uni.$u.toast("请选择牌号厂家");
			 }
	   },
	   savezdy(){
		  log.info('精准询价&厂家牌号弹窗自定义牌号&'+this.value)
		  this.$emit('chooseItem',{brandId:0,brandName:'',goodsSn:this.value})
		  this.show = false 
	   },
	   closeShow(){
		   this.show = false
	   },
	   black(){
		   this.$emit('blackCategory')
	   },
          
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.popupTitle{
	font-size:$b-font;
	font-weight: bold;
	text-align: center;
	line-height: 50px;
}
   .popup-con{
    	padding:0 16px 16px 16px;
    	.popup-block-pay{
    		text-align: center;
    		padding:20px;
    		.price-sub-title{
    			font-size:$s-font;
    			color:$g-font-color;
    			line-height: 30px;
    		}
    		.price-big-title{
    			font-size: 22px;
    			color:$theme-color;
    			font-weight:bold;
    			margin-top:10px;
    		}
    	}
    	.popup-label{
    		line-height: 40px;
    		font-size:$m-font;
    		color:$g-font-color;
    		@include flexbox(space-between,center)
    	}
    	.img-div{
    		width:210px;
    		height:210px;
    		border:1px solid $border-color;
    		margin:0 auto;
    		background: #f4f5f7;
    	}
        .send-list{
    		padding-top:$marginSpace;
    		.send-item{
    			border-radius: 8px;
    			padding:12px;
    			box-shadow: 0 0 5px rgba(0,0,0,0.1);
    			margin-bottom:$marginSpace;
    			.send-top{
    				@include flexbox(flex-start,flex-start);
    				font-size:$m-font;
    				.name{
    					padding-right:12px;
    					flex:1
    				}
    				.num{
    					font-weight: bold;
    					color:$theme-color
    				}
    			}
    			.send-middle{
    				font-size:$s-font;
    				color:$g-font-color;
    				line-height: 18px;
    				margin-top:5px;
    			}
    			.send-bottom{
    				text-align: right;
    				font-size:$s-font;
    				margin-top:16px
    			}
    		}
    	}
    	.category-list{
    		padding:36rpx 0;
    		.list-item{
    			@include flexbox(flex-start,flex-start);
    			margin-bottom:20rpx;
    			.item-title{
    				width: 126rpx;
    				height: 52rpx;
    				background: rgba(255,255,255,0.39);
    				border: 1px solid #B8B8B8;
    				border-radius: 9rpx;
    				font-size:$m-font;
    				text-align: center;
    				line-height: 52rpx;
    			}
    			.item-list{
    				padding-left:30rpx;
    				width:calc(100% - 126rpx);
    				overflow: hidden;
    				.item-ename{
    					font-size:$s-font;
    					color: #B8B8B8;
    					line-height: 52rpx;
    					width: 170rpx;
    					@include textoverflow(1);
    					float:left;
    				}
    			}
    		}
    	}
    	.goodsSn-list{
    		border: 1px solid #DEDEDE;
    		padding:0 10px;
    		font-size:$s-font;
    		margin-top:15px;
    		padding-bottom:10px;
			
    		.list-cell{
    			border-bottom:1px solid #DEDEDE;
    			@include flexbox(space-between,center);
    			line-height: 60rpx;
    			height:60rpx;
    		}
    		.list-cell:first-child{
    			
    		}
			.list-cell.choose{
				background: #fef0f0;
				color:red
			}
    	}
    	.audio-text{
    		font-size: 34rpx;
    		line-height: 48rpx;
    		color: #414141;
    		text-align: center;
    		padding-top:100rpx;
    	}
    	.audio-dh{
    		@include flexbox(space-between,center);
    	}
    
    }
   .zdy-div{
   	  width:100%;
   	  margin-top:20rpx;
   	  background: #fff;
   	  height:128rpx;
   	  .zdy-btn{
   		  font-size:28rpx;
   		  color:#FF5E01;
   		  line-height: 80rpx;
   	  }
   }
   .zdy-form{
   	 @include flexbox(space-between, center)
   }
	.popup-bottom{
    	background: #fff;
    	margin-top:10px;
    	padding:16px;
    }
    .popup-bottom-fixed{
    	position: fixed;
    	width:100%;
    	padding:16px;
    	box-sizing: border-box;
    	bottom:0
    }
    
    

</style>
